
<template>
  <div class="page__all">
    <div>
        遇事不决，可问春风，春风不语，遵从己心。
    </div>

    <div class="user__info" v-if="userStore.isLoggedIn">
        <el-dropdown trigger="click">
            <span class="el-dropdown-link">
                <img :src="userStore.userinfo.avatar?userStore.userinfo.avatar:defult_avatar" alt="">
            </span>
            <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="click_edit_pwd">修改密码</el-dropdown-item>
                <el-dropdown-item @click="click_logout">退出</el-dropdown-item>
            </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>

    <div  class="user__login" v-else>
        
        <div class="login__btn__contains">
            <div class="login__btn"  @click="go_login">登录</div>

            <div class="login__btn register__btn"  @click="go_login">注册</div>
        </div>
    </div>

    <EditPwdDialog
    @cancel="cancel"
    :visible="isVisible"
    ></EditPwdDialog>
    </div>
    </template>
     
<script setup>
    import { ref, onMounted, computed } from "vue"
    import { useUserStore } from '@/stores/user'
    import EditPwdDialog from './EditPwdDialog.vue'
    import router from '@/router'
    const userStore = useUserStore()

    import avatar_png from '@/assets/image/avatar.png'
    const defult_avatar = ref(avatar_png)

    const isVisible = ref(false)

    const click_logout = ()=>{
        console.log('点击退出')
        userStore.logout()
    }

    const cancel = ()=>{
        isVisible.value = false
    }

    const click_edit_pwd = ()=>{
        isVisible.value = true
    }

    const go_login = ()=>{

        userStore.goLogin()
    }

    onMounted(()=>{

    })

</script>
<style scoped lang="scss">
    .page__all{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        position: relative;
    }

    .user__info{

        position: absolute;

        // width: 40px;
        height: 40px;
        right: 10px;

        .el-dropdown-link{
             width: 40px;
            height: 100%;
            img{
                object-fit: cover;
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
        
    }

.user__login{
    // width: 100%;
    position: absolute;
    right: 10px;
    .login__btn__contains{
            // width: 80px;
            width: 100%;
            height: 100%;
            display: flex;
            gap: 20px;
            .login__btn{
                width: 60px;
                user-select: none;
                cursor: pointer;
                height: 30px;
                background-color: var(--wchime-color-highlight);
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
            }
            .register__btn{
                background-color: #fff;
                color: var(--wchime-color-text);
                border: 1px solid var(--wchime-color-border);
            }
        }
}
</style>